<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">   
    <title>模拟一个数据监测</title>
   
</head>

<body>
<!-- 
  Object.keys()方法的用法
  会返回一个由一个给定对象的自身的可枚举属性组成的数组
  1、传入对象返回对象中的属性名
  2、传入字符串，返回索引
  3、创建一个构造函数，调用此方法将该对象的属性名以数组的形式返回
 -->

  <script type="text/javascript">

  let data ={
    name:'天津大学',
    address:'卫津路92号'
  }
  // 创建一个监视的实例对象，用于监视data中属性的变化
  const obs = new Observer(data)
  console.log(obs);


  // 准备一个vm实例对象
  let vm = {}
  vm._data = data =  obs

  // Observer构造函数
  function Observer(obj){
    // 汇总对象中所有的属性形成一个数组--keys中是data中的所有属性
    const keys = Object.keys(obj)

    // 遍历
    keys.forEach((k)=>{// k 代表数组中的每一个对象，形参
      // 函数体
      Object.defineProperty(this,k,{ // this代表当前监视的实例对象 读取k的值
        get(){
          return obj[k]
        },
        set(val){
          console.log(`${k}被改了，我要去解析模板，生成虚拟DOM...我要开始忙了`);
          obj[k] = val         
        }
      })
    })
  }
  </script>

  
   
</body>
</html>
